import { Poem, PoemDetailResponseDTO, PoemSimpleResponseDTO } from "poetry";
import { Link } from "react-router-dom";
import Sorry from "./Sorry";

/**
 * 
 * @param {object} props
 * @param {Poem|PoemSimpleResponseDTO|PoemDetailResponseDTO} props.poems
 * @returns 
 */
function PoemList({ poems }) {
    return (
        <div>
            <ul style={{ listStyle: 'none' }}>
                {poems?.map(poem => (
                    <li key={poem.id} className="my-4">
                        <h3 style={{ fontFamily: 'var(--font-songti-title)', display: 'inline'}}>
                            <Link to={`/poem/${poem.id}`}>{poem.title}</Link>
                        </h3>
                        <span className="text-muted ff-fangsong ms-3 fs-5">{poem.author.name}</span>
                        <br />
                    </li>
                ))}
            </ul>
            {poems?.length === 0 && <Sorry text="什么都没有" />}
        </div>
    );
}

export default PoemList;